import PropTypes from 'prop-types'
import React, { memo, useCallback } from 'react'
import { RoomsWrapper } from './style'
import { shallowEqual, useSelector } from 'react-redux'
import SectionItem from '@/components/section-item'
import { useNavigate } from 'react-router-dom'

const EntireRooms = memo((props) => {
  // const { roomList } = props

  const { roomList,
    totalCount, isLoading
  } = useSelector(state => ({
    roomList: state.entire.roomList,
    totalCount: state.entire.totalCount,
    isLoading: state.entire.isLoading,
  }), shallowEqual)
  const navigate= useNavigate();
  // 点击跳转详情
  const itemClickHandle  = useCallback(function(){
    
    navigate('/detail')
  })
  return (
    <RoomsWrapper>
      <h2 className='title'>{totalCount}多处住所</h2>
      <div className="list">
        {
          roomList.map((item) => {
            return (
              <SectionItem
                itemData={item}
                itemWidth="20%"
                key={item._id}
                itemClick={itemClickHandle}
              />
            )
          })
        }
      </div>
      {isLoading && <div className="cover"></div>}
    </RoomsWrapper>
  )
})

EntireRooms.propTypes = {
  // roomList: PropTypes.array
}

export default EntireRooms